{extend name="public/base" /}
{block name="css"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.css" /}
<style>
  .swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-container .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #F4F5F6;
  }
  .swiper-container .swiper-slide > img {
    width: 100%;
  }
  .swiper-container .swiper-pagination{
    margin-bottom: 380px;
    bottom: 0px;
    text-align: left;
  }

  .swiper-pagination {
    border-bottom: 400px;
  }

  .swiper-container .swiper-pagination .swiper-pagination-bullet {
    background: rgba(200,200,200,.6);
    opacity: 1.0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
    background: #656667;
  }
  .swiper-container .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0px 5px;
  }
</style>
{/block}
{block name="main"}
<section class="container-fluid main-container">
  <div style="position: relative">
    <img alt="" class="img-fluid page-banner" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/furniture/pc/Banner.png">
    <div style="position: absolute; top: 77%;right: 21%;">
      <button onclick="doConsult()" style="height: 40px;padding: 5px 20px;border: none;background: #D19F83;color: #ffffff;border-radius:4px;">在线咨询 ></button>
      <button onclick="showAppointmentLayer()" style="margin-left: 50px;height: 40px;padding: 5px 20px;border: none;background: #B94047;color: #ffffff;border-radius:4px;">立即报名 ></button>
    </div>
  </div>

  <div class="d-flex flex-column p-t-5" style="background: #F4F5F6;padding-bottom: 50px">
    <div style="width: 1000px;margin: 0 auto">
      <img style="width: 50%;float: left;margin-bottom: 40px" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/furniture/pc/Title01.png">
      <div class="swiper-container" style="position: relative;background: #F4F5F6">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img class="img-responsive" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/furniture/pc/txt0.png" style="position: absolute;left: 0;top: 0;width:15%">
            <img src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/furniture/pc/lunbo1.png"  class="img-responsive">
          </div>
          <div class="swiper-slide">
            <img class="img-responsive" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/furniture/pc/txt0.png" style="position: absolute;left: 0;top: 0;width:15%">
            <img src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/furniture/pc/lunbo2.png"  class="img-responsive">
          </div>
          <div class="swiper-slide">
            <img class="img-responsive" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/furniture/pc/txt0.png" style="position: absolute;left: 0;top: 0;width:15%">
            <img src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/furniture/pc/lunbo3.png"  class="img-responsive">
          </div>
          <div class="swiper-slide">
            <img class="img-responsive" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/furniture/pc/txt0.png" style="position: absolute;left: 0;top: 0;width:15%">
            <img src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/furniture/pc/lunbo4.png"  class="img-responsive">
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>

  <div class="d-flex flex-column p-t-5" style="padding-bottom: 50px">
    <div style="width: 1000px;margin: 0 auto;display: flex;flex-direction: column">
      <img style="width: 50%;float: left;margin-bottom: 40px" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/furniture/pc/Title02.png">
      <img style="width: 100%;" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/furniture/pc/AB.png">
      <img style="width: 100%;margin-top: 30px" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/furniture/pc/C.png">
      <img style="width: 100%;margin-top: 30px" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/furniture/pc/D.png">
    </div>
  </div>

  <div class="d-flex flex-column p-t-5" style="background: #F4F5F6;padding-bottom: 50px">
    <div style="width: 1000px;margin: 0 auto;display: flex;flex-direction: column">
      <img style="width: 50%;float: left;margin-bottom: 40px" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/furniture/pc/Title03.png">
      <div class="row">
        <div class="cox-6">
          <img style="width: 90%;" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/furniture/pc/Part03_02.png">
        </div>
        <div class="cox-6" style="text-align: right">
          <img style="width: 90%;" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/furniture/pc/Part03_01.png">
        </div>
      </div>
    </div>
  </div>

  <div class="d-flex flex-column p-t-5" style="padding-bottom: 50px">
    <div style="width: 1000px;margin: 0 auto;display: flex;flex-direction: column">
      <img style="width: 50%;float: left;margin-bottom: 40px" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/furniture/pc/Title04.png">
      <img style="width: 30%;float: left;margin-bottom: 40px" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/furniture/pc/txt1.png">
    </div>
    <img style="width: 100%;" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/furniture/pc/jiagezu.png">
    <img class="mx-auto" style="width: 50%;margin-top: 50px" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/furniture/pc/txt2.png">
  </div>

  <div class="d-flex flex-column">
    <img onclick="showAppointmentService()" class="mx-auto" style="width:100%;cursor: pointer" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/furniture/pc/Part05.png">
  </div>

</section>
{/block}
{block name="js"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.js" /}
<script>
    $('.navbar-nav').children('li').eq(3).addClass('nav-active');

    // 轮播事件
    var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        } ,
        autoplay: {
            delay: 5000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        },
        paginationElement : 'li',
        paginationClickable: true,
        loop: true,
        autoplayDisableOnInteraction: false
    });
</script>
{/block}